import React, { Component } from 'react';
import { List,Checkbox } from 'antd-mobile';
import { ListHead, ModelBox } from './styleModel'
import { withRouter } from 'react-router-dom'


const Item = List.Item;

@withRouter
class SeletctList extends Component {
    state = {
        curIndex:[0,0,0,0,0,0],
    }

    handleClick = (i,index) => {
        return () => {
        let arr = this.state.curIndex
        arr[i]=index
            this.setState(()=>{
                return {curIndex: arr}
            })
        }
    }
    render() {
        return (
            <>
                <ModelBox>
                    <div className='item-title'>
                        <p>{ this.props.location.state}</p>
                        <p>注：每个环节只能选择一个模块</p>
                    </div>
                    <h3>
                    </h3>
                    {
                        this.props.list.map( (v,i)=>{
                            return(
                                <List renderHeader={() => (
                                    <ListHead className='list-head'>{v.mkName}</ListHead>
                                )} className="my-list" key={v.mkId}>
                                    {v.child.map( (item,index)=>{
                                        return(
                                            <Item extra={
                                                // console.log( v.p_list.indexOf(item), this.state.curIndex[i] )
                                                v.child.indexOf(item) === this.state.curIndex[i] 
                                                ?  <Checkbox checked={true}></Checkbox>
                                                :  <Checkbox checked={false}></Checkbox>
                                             } onClick={ this.handleClick( i,index)} key={item.mkId}>
                                                {item.mkName}
                                            </Item>
                                        )
                                    })}
                                </List>
                            )
                        })
                    }
                    <span></span>
                </ModelBox>
            </>
        )
    }
}
export default SeletctList;